/*
 * @Author: Yxliam
 * @Date: 2023-12-12 16:59:16
 * @LastEditors: Yxliam
 * @LastEditTime: 2023-12-13 10:49:15
 * @Description:
 */
import React, {useState} from 'react';
import {
  createBottomTabNavigator,
  BottomTabBarProps,
} from '@react-navigation/bottom-tabs';
// import {HomeOutline} from '@fruits-chain/icons-react-native';
import {TransitionPresets} from '@react-navigation/stack';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  TouchableHighlight,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import {activeColor} from '../../common/color';
import {p} from '../../utils/pxToDp';
import MyHome from '../myhome';
import MyMine from '../mymine';
import Public from '../public';
import icon_image from '../../assets/icon_tab_publish.png';
import icon1 from '../../assets/0qr.png';
import icon2 from '../../assets/5RG.png';

const BottomTab = createBottomTabNavigator();
const screenWidth = Dimensions.get('window').width;
const Tabs = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const onPublishPress = () => {
    console.log('click');
    toggleModal();
  };

  const RedBookTabBar = ({state, descriptors, navigation}: any) => {
    //routes 是所有的路由， index是当前选择的
    const {routes, index} = state;
    return (
      <View style={styles.tabBarContainer}>
        {routes.map((route: any, i: number) => {
          //获取视图的options配置
          const {options} = descriptors[route.key];
          const label = options.title;
          const isFocused = index === i;
          if (i === 1) {
            return (
              <TouchableOpacity
                style={styles.tarItem}
                key={label}
                onPress={onPublishPress}>
                <Image style={styles.publish} source={icon_image} />
                {/* <Text>Add</Text> */}
              </TouchableOpacity>
            );
          } else {
            return (
              <TouchableOpacity
                style={styles.tarItem}
                key={label}
                onPress={() => {
                  navigation.navigate(route.name);
                }}>
                <Text
                  style={isFocused ? styles.itemselect : styles.itemdefault}>
                  {label}
                </Text>
              </TouchableOpacity>
            );
          }
        })}
      </View>
    );
  };

  return (
    <View style={styles.root}>
      <BottomTab.Navigator
        //完全自定义样式
        tabBar={props => <RedBookTabBar {...props} />}>
        <BottomTab.Screen
          name="Home"
          component={MyHome}
          options={{
            title: '首页',
            headerShown: false,
          }}
        />
        <BottomTab.Screen
          name="Public"
          component={Public}
          options={{
            title: '发布',
            headerShown: false,
          }}
        />
        <BottomTab.Screen
          name="Mine"
          component={MyMine}
          options={{
            title: '我的',
            headerShown: false,
          }}
        />
      </BottomTab.Navigator>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        {/* 加了TouchableWithoutFeedback 点击弹窗会消失，但是点击里面的内容不会消失  */}
        <TouchableWithoutFeedback onPress={toggleModal}>
          <View style={styles.modalContainer}>
            {/* 这里放置你想要的操作按钮 */}
            <View style={styles.operations}>
              <TouchableHighlight style={styles.button} onPress={() => {}}>
                <View style={styles.buttonView}>
                  <Image style={styles.buttonImg} source={icon1} />
                  <Text style={styles.buttonText}>语音</Text>
                </View>
              </TouchableHighlight>
              <TouchableHighlight style={styles.button} onPress={() => {}}>
                <View style={styles.buttonView}>
                  <Image style={styles.buttonImg} source={icon2} />
                  <Text style={styles.buttonText}>文本</Text>
                </View>
              </TouchableHighlight>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  tabBarContainer: {
    width: '100%',
    height: 64,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  tarItem: {
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemdefault: {
    fontSize: 16,
    color: '#999',
    fontWeight: 'normal',
  },
  itemselect: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
  },
  publish: {
    width: 60,
    height: 48,
    resizeMode: 'contain',
  },
  modalContainer: {
    flex: 1,
    // justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    padding: 20,
  },
  button: {
    // textAlign:'center'
  },
  buttonView: {},
  buttonText: {
    textAlign: 'center',
    color: 'white',
    fontSize: 16,
    marginTop: 10,
  },
  buttonImg: {
    width: 50,
    height: 50,
  },
  operations: {
    position: 'absolute',
    bottom: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: screenWidth,
  },
});

export default Tabs;
